<template>
	<view class="content">
		<view class="login-bg">
			<view class="header">

			</view>
			<view class="titleText">
				<view class="hy">登录</view>
				<view class="xccp"></view>
			</view>
			<view class="login-card">
				<label class="uni-list-cell uni-list-cell-pd" style="padding: 0;border-bottom: 1px #e7e6ef solid;margin-top: 60upx;">
					<view>
						<input class="uni-input" placeholder="用户名/手机号" v-model="form.username" />
					</view>
					<view class="uni-icon uni-icon-clear" v-if="form.username" @click="delInputUsernameText"></view>
					<view class="uni-icon" v-else></view>
					<view class="uni-icon placeholdertext"></view>
				</label>
				<label class="uni-list-cell uni-list-cell-pd" style="padding: 0;border-bottom: 1px #e7e6ef solid;margin-top: 60upx;">
					<view>
						<input class="uni-input" placeholder="密码" :password="showPassword" v-model="form.password" />
					</view>
					<view class="uni-icon uni-icon-clear" v-if="form.password" @click="delInputPasswordText"></view>
					<view class="uni-icon" v-else></view>
					<view class="uni-icon uni-icon-eye" :class="[showPassword ? '' : 'uni-active']" @click="changePassword"></view>
				</label>
				<label class="uni-list-cell uni-list-cell-pd" style="padding: 0;border-bottom: 1px #e7e6ef solid;margin-top: 60upx;">
					<view>
						<input class="uni-input" v-model="form.code" placeholder="验证码" style="width: auto;" />
					</view>
					<view><img :src="codeSrc" style="width: 130px; vertical-align: middle; hhecursor: pointer;height: 60px;" @click="getVerifyCode()"></view>
				</label>
			</view>
		</view>
		<view class="login-btn">
			<view :class="['landing',checkIn ? 'landing_true' : 'landing_false']" @tap="doLogin">登 陆</view>
		</view>

		<view class="login-function">
			<view class="login-forget" @click="go_forget">忘记密码</view>
			<view class="login-register" @click="go_register">快速注册></view>
		</view>

	</view>
</template>

<script>
	import auth from '../../util/api/auth.js';
	import _data from '../../util/_data.js';
	export default {
		data() {
			return {
				showPassword: true,
				op: '/static/shilu-login/op.png',
				cl: '/static/shilu-login/cl.png',
				logo: '/static/shilu-login/logo.png',
				form: {
					username: '',
					password: '',
					code: '',
				},
				loading: false,
				codeSrc: null,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					//console.log(res);
				}
			});
		},
		created() {
			this.getVerifyCode()
		},
		computed: {
			checkIn() {
				return this.form.password != '' && this.form.username != '' && this.form.password.length > 5;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			delInputUsernameText() {
				this.form.username = ''
			},
			delInputPasswordText() {
				this.form.password = ''
			},
			getVerifyCode() {
				auth.getVerificationCode().then((response) => {
					if (response.code == 200) {
						this.codeSrc = response.data.img
					}
				})
			},
			doLogin() {
				let _this = this;
				if (!_this.checkIn) {
					return;
				}
				/*
                if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_this.form.username))) {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号不正确'
                    });
                    return;
                }*/
				if (_this.form.username.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '用户名不能小于6位'
					});
					return;
				}
				if (_this.loading) {
					return;
				}
				uni.showLoading();
				_this.loading = true;
				auth.login(_this.form).then(response => {
					uni.hideLoading();
					_this.loading = false;
					if (response.code != 200) {
						this.getVerifyCode()
						uni.showModal({
							content: response.msg,
						});
					} else {
						_data.data('token', response.data.access_token)
						_data.data('user_info', response.data.user_info)
						uni.reLaunch({
							url: '../chat/index',
						});
					}
				}).catch(Error => {
					uni.hideLoading();
					_this.loading=false
					uni.showModal({
						content: '登陆失败',
					});
				});
			},
			go_forget() {
				uni.navigateTo({
					url: '../../pages/auth/forget'
				})
			},
			go_frozen() {
				uni.navigateTo({
					url: '../../pages/set/frozen'
				})
			},
			go_register() {
				uni.navigateTo({
					url: '../../pages/auth/reg'
				})
			}

		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.header {
		height: 100upx;
		text-align: center;
		padding: 0 40upx;
	}

	.header .goBack {
		width: 40upx;
		height: 100upx;
		background-image: url(/static/theme/default/login/goBack.png);
		background-size: auto 30upx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.titleText {
		padding: 60upx;
	}

	.titleText .hy {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 56upx;
		line-height: 78upx;
		color: #333333;
		mix-blend-mode: normal;
		margin-top: 80upx;
	}

	.titleText .xccp {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28upx;
		line-height: 40upx;
		color: #999999;
		mix-blend-mode: normal;
		margin-top: 30upx;
	}

	.landing {
		height: 84upx;
		line-height: 84upx;
		color: #FFFFFF;
		font-size: 32upx;
		width: 550upx;
		border: none;
		border-radius: 10upx;
		margin: 0 auto;
		background: linear-gradient(278.07deg, #467CF6 0.25%, #6C99FF 100%);
	}

	.placeholdertext {
		/* #ifdef H5 */
		width: 48upx;
		/* #endif */
		/*#ifdef APP-PLUS */
		width: 40upx;
		/* #endif */
		height: 24upx;
	}

	.landing_true {
		background: linear-gradient(278.07deg, #467CF6 0.25%, #6C99FF 100%);
	}

	.landing_false {
		background: linear-gradient(278.07deg, #d8d8d8 0.25%, #d8d8d8 100%);
	}

	.uni-button[type=primary] {}

	.landing_false {
		/**/
		border-radius: 4px;
	}

	.login-btn {
		padding: 10upx 20upx;
		margin-top: 68upx;
		text-align: center;
	}

	.login-input input {
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.login-margin-b {
		margin-bottom: 25upx;
	}

	.login-input {
		padding: 20upx 20upx;
	}

	.login-head {
		font-size: 34upx;
		text-align: center;
		margin-top: 35upx;
		margin-bottom: 24upx;
		padding: 25upx 80upx 130upx 10upx;
	}

	.login-card {
		background: #fff;
		border-radius: 12upx;
		padding: 10upx 60upx;
		/* box-shadow: 0 6upx 18upx rgba(0,0,0,0.12); */
		position: relative;
	}

	.login-bg {
		/* height: 260upx;
        padding: 25upx;
        background: linear-gradient(#FF978D, #FFBB69); */
		background-image: url(/static/theme/default/login/bg.png);
		background-repeat: no-repeat;
		background-size: 45% auto;
		background-position: top right;
	}

	.uni-input {
		height: 50upx;
		width: 460upx;
		padding: 15upx 0 15upx 0upx;
		line-height: 50upx;
		font-size: 28upx;
		background: #FFF;
		flex: 1;
	}

	.uni-icon {
		text-align: left;
	}

	.login-function {
		margin-top: 40upx;
		display: flex;
		flex-direction: row
	}

	.login-register,
	.login-forget {
		text-align: center;
		color: #467CF6;
		font-size: 26upx;
		flex: 1;
	}

	.uni-list-cell:after {
		display: none !important;
	}
</style>
